<template>
	<wd-popup customStyle="width: 100%;height:100vh; overflow:hidden;" :z-index="999" v-model="state.showDiag">
		<view class="cu-dialog bg-white">
			<view class="content">
				<scroll-view scroll-y scroll-x class="table-container" :refresher-enabled="false">
					<view class="search-results">
						<table class="analysis-table flow-details" :class="isScrollRight ? 'scroll-rigth' : ''">
							<tbody>
								<tr class="header">
									<th style="width: 160rpx; min-width: 5.2rem;">工序</th>
									<th style="width: 160rpx; min-width: 16.2rem;">操作时间</th>
									<th style="width: 160rpx; min-width: 6.2rem;">参数</th>
									<th style="width: 160rpx; min-width: 6.2rem;">目标值</th>
									<th style="width: 160rpx; min-width: 7.2rem;">数值</th>
									<th style="width: 160rpx; min-width: 7.2rem;">单位</th>
									<th style="width: 160rpx; min-width: 10.2rem;"
										v-if="elementDTO.dosageList && elementDTO.dosageList.length">用料名称</th>
									<th style="width: 160rpx; min-width: 10.2rem;">操作</th>
								</tr>
								<tr align="center" v-for="(item, index) in tableData" :key="index">
									<td :class="item.status == 4 ? 'td__abandon' : ''">{{ item.processName }}</td>
									<td :class="item.status == 4 ? 'td__abandon' : ''">
										<view style="display:flex;align-items:center;" v-if="item.paramValue == '-'">
											<view style="white-space: nowrap;"> {{ item.title }}</view>
											<th-datetime-picker v-if="item.recallFlag != 1" v-model:value="item.operateTime"
												valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="请选择日期"
												defaultDate></th-datetime-picker>
											<text v-else>{{ item.operateTime }}</text>
										</view>

										<view style="display:flex;align-items:center;" v-else>
											<th-datetime-picker v-if="item.recallFlag != 1 && item.status != 4"
												v-model:value="item.operateTime" defaultDate
												valueFormat="YYYY-MM-DD HH:mm:ss" labelFormat="MM-DD HH:mm:ss"
												placeholder="请选择日期"
												@change="(e) => updateTime(e, item)"></th-datetime-picker>
											<text v-else>{{ formatTime(item.operateTime) }}</text>
										</view>
									</td>
									<td :class="item.status == 4 ? 'td__abandon' : ''">{{ item.paramName }}</td>
									<td :class="item.status == 4 ? 'td__abandon' : ''">{{ item.schemeParamValue }}</td>
									<td :class="item.status == 4 ? 'td__abandon' : ''">
										<wd-input v-if="item.paramValue != '-' && item.status != 4 && item.recallFlag != 1"
											v-model="item.paramValue" type="number" clearable no-border
											style="background-color: transparent;" />
										<text v-else>{{ item.paramValue }}</text>
									</td>
									<td :class="item.status == 4 ? 'td__abandon' : ''">
										<wd-picker
											v-if="item.paramValue != '-' && item.paramUnitList && item.status != 4 && item.recallFlag != 1"
											v-model="item.paramUnit" value-key="name" label-key="name"
											:columns="item.paramUnitList" style="background-color: transparent;" />
										<text v-else>{{ item.paramUnit }}</text>
									</td>
									<td :class="item.status == 4 ? 'td__abandon' : ''"
										v-if="elementDTO.dosageList && elementDTO.dosageList.length">
										<wd-picker v-if="item.paramValue != '-' && item.status != 4 && item.recallFlag != 1"
											v-model="item.invName" value-key="invName" label-key="invName"
											:columns="elementDTO.dosageList" style="background-color: transparent;"
											@confirm="(e) => setRow(e, item)" />
										<text v-else>{{ item.invName }}</text>
									</td>
									<td>
										<view v-if="item.paramValue != '-'">
											<wd-button type="text" primary style="font-size: 0.8rem; color:#4d80f0;"
												@click="() => insertOneRow(item, index)">
												插行
											</wd-button>
											<wd-button type="text" danger v-if="item.recallFlag != 1"
												style="font-size: 0.8rem; margin-left:0.8rem; color:#fa4350;"
												@click="removeRow(index)">
												删行
											</wd-button>
											<wd-button type="text" danger v-if="item.recallFlag == 1 && item.status != 4"
												style="font-size: 0.8rem; margin-left:0.8rem; color:#fa4350;"
												@click="item.status = 4">
												废弃
											</wd-button>
											<wd-button type="text" danger v-if="item.recallFlag == 1 && item.status == 4"
												style="font-size: 0.8rem; margin-left:0.8rem; color:#fa4350;"
												@click="item.status = null">
												取消废弃
											</wd-button>
											<wd-button type="text" danger v-if="item.recallFlag == 1"
												style="font-size: 0.8rem; margin-left:0.8rem; color:#4d80f0;"
												@click="changeHandle(item, index)">
												变更
											</wd-button>
										</view>

									</td>
								</tr>
							</tbody>
						</table>
					</view>
				</scroll-view>
			</view>

			<view class="flow-btn-fixed">
				<view class="btn_group" style="width: 100%">
					<view class="btn danger" @click="hideModal">取消</view>
					<view class="btn primary" @click="makeSure">确定</view>
				</view>
			</view>
		</view>
	</wd-popup>
</template>

<script lang="ts" setup>
import thSelect from '../../../assay-report/component/th-select.vue';
import thDatetimePicker from './datetime-picker.vue';
import dayjs from 'dayjs';

const emit = defineEmits(['confirm', 'hideModal']);

const props = defineProps({
	show: {
		type: Boolean,
		default: false,
	},
	dataList: {
		type: Array,
		default: () => [],
	},
	elementDTO: {
		type: Object,
		default: () => { },
	}

});

const state = reactive({
	showDiag: false,
});

const tableData = ref([])

const columns = computed(() => {
	return [
		{ label: '工序', prop: 'processName', align: 'center', width: 100 },
		{ label: '操作时间', prop: 'unit', align: 'center', width: 200 },
		{ label: '参数', prop: 'paramName', align: 'center', width: 100 },
		{ label: '目标值', prop: 'schemeParamValue', align: 'center', width: 100 },
		{ label: '数值', prop: 'paramValue', align: 'center', width: 100 },
		{ label: '单位', prop: 'paramUnit', align: 'center', width: 100 },
		{
			label: '操作',
			type: 'action',
			align: 'center',
			render: 'action',
			width: 100,
			fixed: 'right',
		},

	]
})

watch(
	() => props.show,
	(val) => {
		state.showDiag = val;
	},
	{ immediate: true, deep: true },
);

watch(
	() => props.dataList,
	(val) => {
		tableData.value = val;
	},
	{ immediate: true, deep: true },
);

const hideModal = () => {
	emit('hideModal')
	state.showDiag = false;
};

const setRow = (e, row) => {
	row.dosageId = e.selectedItems.id
}

const isScrollRight = ref(false)
const onScroll = (e) => {
	if (e.detail.scrollLeft > 0) {
		isScrollRight.value = true
	} else {
		isScrollRight.value = false
	}
}

const formatTime = function (time) {
	if (!time) return ''
	return dayjs(time).format('MM-DD HH:mm:ss');
};

const insertOneRow = (row, rowIndex) => {
	const newRow = {
		frequencyFlag: row.frequencyFlag,
		paramName: row.paramName,
		paramUnit: row.paramUnit,
		schemeId: row.schemeId,
		valueType: row.valueType,
		schemeParamValue: row.schemeParamValue,
		paramValue: '',
		dosageId: '',
		invName: '',
		processName: row.processName,
		operateTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
	};
	tableData.value.splice(rowIndex + 1, 0, newRow);
}

const removeRow = (rowIndex) => {

	tableData.value.splice(rowIndex, 1);
}

const changeHandle = (row, rowIndex) => {
	row.status = 4
	insertOneRow(row, rowIndex)
}

const updateTime = (e, row) => {
	const startTime = tableData.value[0].operateTime
	const endTime = tableData.value[tableData.value.length - 1].operateTime
	if (!startTime) {
		row.operateTime = ''
		return uni.showToast({
			title: '没有开始时间',
			icon: 'none',
		});
	}
	if (new Date(e).getTime() < new Date(startTime).getTime()) {
		row.operateTime = ''
		return uni.showToast({
			title: '不能小于开始时间',
			icon: 'none',
		});
	}

	if (endTime && new Date(e).getTime() > new Date(endTime).getTime()) {
		tableData.value[tableData.value.length - 1].operateTime = dayjs().format("YYYY-MM-DD HH:mm:ss")
	}


}
const makeSure = () => {
	emit('confirm', tableData.value);
	hideModal();
};
</script>


<style scoped lang="scss">
@import "../table.scss";

.cu-dialog {
	height: 100%;
	padding: 100rpx 0 0 0;
	font-size: 0.825rem;
	box-sizing: border-box;

	.cu-bar {
		// padding: 10rpx 20rpx;
		position: relative;
		align-items: center;
		justify-content: space-between;
		min-height: 50px;
		border-bottom: 1rpx solid #f1f1f1;

		.action {
			display: flex;
			align-items: center;
			justify-content: center;
			min-width: 50px;
			min-height: 50px;
			margin-right: 0;
			font-size: 30rpx;
		}
	}

	.flow-btn-fixed {
		width: 100%;
		background-color: white;
		border-top: 1px solid #f2f2f1;
	}

	.btn_group {
		display: flex;
		justify-content: space-between;

		// margin: 0rpx 0 20rpx;
		border-bottom: 1px solid #f2f2f1;

		.btn {
			display: flex;

			// width: 49%;
			flex: 1;
			align-items: center;
			justify-content: center;
			height: 40px;
			color: black;
			background-color: white !important;
			border-left: 1px solid #f7f7f7;
			border-radius: 0 !important;
			font-size: 32rpx;
			// color: white;
			border-radius: 6rpx;
		}

		.danger {
			color: #f56c6c;
		}

		.primary {
			color: #409eff;
		}
	}

	.content {
		height: calc(100vh - 214rpx);

		.table-container {
			height: 100%
		}


		.search-results {
			// padding: 0 35rpx;
			// margin-top: 30rpx;
			width: 100%;
			position: relative;

			.flow-details {
				min-width: 350px;

				.header {
					position: sticky;
					top: 0;
					background-color: #8a929f;
					z-index: 9;
					box-shadow: 0 6rpx 28rpx 0 #e0e0e0;
					border-bottom: 1rpx solid #dedede;
				}

				&.scroll-rigth {
					.sticky-left {
						&:after {
							content: "";
							position: absolute;
							top: 0;
							bottom: 0;
							right: 0;
							width: 1rpx;
							background-color: #dedede;
							// box-shadow: 6rpx 0 28rpx 0 #e0e0e0;
							z-index: 2;
						}

						// border-right: 1rpx solid #dedede;
					}
				}
			}
		}
	}

	.td__abandon {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			top: 50%;
			left: 0;
			width: 100%;
			height: 0;
			border-bottom: 1px solid #f56c6c;
			z-index: 1;
		}
	}
}
</style>